<template>
	<div class="header">
		<img src="../../../assets/img/logo.png" />
		<ul class="menus" :style="{'display':isaBool?'none':'block'}">
			<li><router-link to="/mobile/home">推荐</router-link></li>
			<li><router-link to="/mobile/book">书库</router-link></li>
			<li><router-link to="/mobile/admin">我的</router-link></li>
		</ul>
		<div class="search">
			<img src="../../../assets/img/search.png" @click="find()"/>
		</div>
		<!-- <div class="search" @click="goSearch()">
			<img src="@/assets/img/search.png"/>
		</div> -->
	</div>
</template>

<script>
	import MobileFind from '@/components/mobile/MobileFind.vue'
	export default {
		name: 'MobileHeader',
		components:{
			MobileFind
		},
		data() {
			return {
				isaBool: false
			}
		},
		methods:{
			find(){
				this.$router.push("/mobile/MobileFind")
			},
			goSearch(){
				this.$router.push('mobile/search')
			}
		}
	}
</script>

<style scoped>
	.header {
			width: 100%;
			height: 3.5rem;
			background-color: #a68b5b;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2px solid #787878;
			/* position:relative;定位的元素保留原本的位置 */
			/* position:obsolute;定位的元素抛弃原来的位置，被其他标签顶替 */
			/* position: fixed;固定定位 */
			position: fixed;
			top: 0;
			z-index: 11;
		}
	
		.header .menus {
			margin: 0;
			padding: 0;
			list-style: none;
			width: 55%;
			height: 100%;
			color: white;
			/* 默认显示;动画开始的时候,设置为隐藏状态 */
			display: block;
			margin-top: -60px;
		}
		.header .menus li a{
			width: 33.33%;
			float: left;
			height: 3.2rem;
			line-height: 3.2rem;
			text-align: center;
			color: white;
			display: block;
		}
		.header .menus li .router-link-active{
			border-bottom: 0.2rem solid gold;
			color: gold;
		}
	
		.header .search {
			border-radius: 50%;
			border: 1px solid white;
			width: 2rem;
			height: 2rem;
			margin-right: 0.5rem;
			display: flex;
			/* 垂直居中 */
			align-items: center;
			/* 水平剧中 */
			justify-content: center;
		}
	
	
		/* PC端的事件:鼠标事件:手指事件/手势事件touch
	hover属于pc端的鼠标操作,不适合在移动端运行
	.header .search:hover{
	   动画的名字 时长 速度
	 animation: formWidth 1s linear;
	   
	} */
		/* 将form宽度从2rem——16rem */
		@keyframes formWidth {
	
			/* 宽度从2rem开始*/
			0% {
				width: 2rem;
			}
	
			/* 到16rem结束 */
			100% {
				width: 20rem;
			}
		}
</style>